<template>
  <div id="category">
    <el-button type="danger" @click="addFirst({type:'category_list_add'})">添加一级分类</el-button>
    <hr class="hr-e9e9e9" />
    <div>
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="category-wrapper">
            <div class="category" v-for="item in category.item" :key=item.id>
              <!-- 一级分类 -->
              <h4>
                <span class="iconfont">&#xe614;</span>{{item.category_name}}
                <div class="button-group">
                  <el-button type="danger" 
                  @click="editCategory({fistItemName:item,type:'category_first_edit'})" 
                  size="mini" round>
                  编辑
                  </el-button>
                  <el-button type="success" size="mini" round @click="handlerAddChildren({firstItemName:item,type:'category_children_add'})"
                    >添加子集</el-button
                  >
                  <el-button size="mini" round @click="deleteCategory(item.id)">删除</el-button>
                </div>
              </h4>
              <!-- 二级分类 -->
              <ul v-if="item.children">
                <li v-for="childrenItem in item.children" :key=childrenItem.id> 
                  {{childrenItem.category_name}}
                   <div class="button-group">
                    <el-button size="mini" type="danger" round>编辑</el-button>
                    <el-button size="mini" round>删除</el-button>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <h4 class="menu-title">一级分类编辑</h4>
          <el-form label-width="142px" class="w420 mt">
            <el-form-item label="一级分类名称">
              <el-input v-model="form.categoryName" v-if="category_first_input" :disabled="category_first_disabled"></el-input>
            </el-form-item>
            <el-form-item label="二级分类名称" class="mt" v-if="category_children_input">
              <el-input v-model="form.secCategoryName" :disabled="category_children_disabled"></el-input>
            </el-form-item>
            <el-form-item class="mt">
              <el-button type="primary" @click="submit" :loading="submit_button_loading" :disabled="submit_button_disabled">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted } from "@vue/composition-api";
import { AddFristCategory,GetCategory,GetCategoryAll,DeleteCategory,EditCategory,AddChildrenCategory} from "@/api/news";
export default {
  name: "category",
  setup(props, { root }) {
    const sumbit_button_type = ref('')
    const category_first_input = ref(true)
    const category_children_input = ref(true)
    const submit_button_loading = ref(false)
    const category_first_disabled = ref(true)
    const category_children_disabled = ref(true)
    const submit_button_disabled = ref(true)
    const deleteId = ref('')
    const form = reactive({
      categoryName: "",
      secCategoryName: "",
    });

    const category = reactive({
      item:[],
      current:[]
    })

    const submit = () => {
      console.log(sumbit_button_type.value);
      if(sumbit_button_type.value == 'category_list_add') {
        addFirstCategory()
      }
      if(sumbit_button_type.value == 'category_first_edit') {
        editFirstCategory()
      }
      if(sumbit_button_type.value == 'category_children_add') {
        addChildrenCategory()
      }
      
    };
  

    const addFirstCategory = () => {
      if(!form.categoryName) {
              root.$message.error('内容不能为空');
              return
            }
      AddFristCategory({ categoryName: form.categoryName })
        .then((res) => {
          submit_button_loading.value = true
          console.log(res);
          if (res.data.resCode === 0) {
            root.$message({
              message: "恭喜你，添加成功",
              type:'success'
            });
            category.item.push(res.data.data)
          }
          submit_button_loading.value = false
          form.categoryName = '',
          form.secCategoryName = ''
        })
        .catch((err) => {
          submit_button_loading.value = false
          form.categoryName = '',
          form.secCategoryName = ''
        });
    }

    //添加一级分类
    const addFirst = (data) => {
      form.categoryName = ''
      sumbit_button_type.value = data.type
      console.log(sumbit_button_type.value);
      category_first_input.value = true;
      category_children_input.value = false;
      category_first_disabled.value = false
      submit_button_disabled.value = false
    }
    //添加子级
    const handlerAddChildren = (data) => {
      //更新确定按钮类型
      console.log(data);
      sumbit_button_type.value = data.type
      // 存储数据
      category.current = data.firstItemName
      // 禁用一级输入框
      category_first_disabled.value = true
      // 启用子级输入框
      category_children_disabled.value = false
      // 启用确认按钮
      submit_button_disabled.value = false
      // 显示子级输入框
      category_children_input.value = true
      // 显示一级分类
      form.categoryName = data.firstItemName.category_name
    }

    const addChildrenCategory = () => {
      console.log(212);
      console.log(category);
      if(!form.secCategoryName) {
        root.$message({
          message:"子级分类名称不能为空",
          type:"error"
        })
        return false
      }

      let requestData = {
        categoryName:form.secCategoryName,
        parentId: category.current.id 
      }

      AddChildrenCategory(requestData).then((res) => {
        let responseData = res.data.data
        console.log(responseData);
        root.$message({
          message:'添加成功',
          type:success
        })
        //调用分类列表接口，刷新列表
        getCategoryAll()
      }).catch((err) => {

      })
    }
    const getCategoryAll = () => {
      GetCategoryAll({}).then((res) => {
        console.log(res.data.data);
        category.item = res.data.data
      }).catch((err) => {

      })
    }
    // 删除
    const deleteCategory = (data) => {
      DeleteCategory({categoryId:data}).then((res) => {
        deleteId.value = data
        /**
         * es6找下标  findindex
         */
        let index = category.item.findIndex(item => item.id == deleteId.value)
        console.log(index);
        console.log(res);
        category.item.splice(index,1,0)
      }).catch((err) => {
        console.log(err);
      })
    }

    // 编辑
    const editCategory = (data) => {
      sumbit_button_type.value = data.type
      category_children_input.value = false
      category_first_disabled.value = false
      submit_button_disabled.value = false
      // 一级名称数据还原
      form.categoryName = data.fistItemName.category_name
      console.log(form.categoryName);
      //存储当前数据对象 
       category.current = data.fistItemName
       console.log(data);
      console.log(sumbit_button_type.value);
    }

    const editFirstCategory = () => {
      console.log(category.current);
 
      let requestData = {
        id:category.current.id,
        categoryName:form.categoryName
      }

      EditCategory(requestData).then(res => {
        console.log(res);
        if(res.data.resCode == 0) {
          root.$message({
            message: '修改成功',
            type: 'success'
        });
        let data = category.item.filter(item => item.id == category.current.id) 
        console.log(data);
        console.log(requestData);
        data[0].category_name = requestData.categoryName
        form.categoryName = ''
        }
      }).catch(err => {
        console.log(err);
      })

    }
   
    /**
     * 生命周期  onmounted当页面dom完成渲染
     */
    onMounted(() => {
      getCategoryAll()
    })

    return {
      // ref
      sumbit_button_type,
      deleteId,
      category_first_input,
      category_children_input,
      submit_button_loading,
      category_first_disabled,
      category_children_disabled,
      submit_button_disabled,
      // reactive 
      form,category,
      // method 
      submit,
      addFirst,
      handlerAddChildren,
      getCategoryAll,
      deleteCategory,
      editCategory,
      addFirstCategory,
      addChildrenCategory
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
.category-wrapper {
  div:first-child {
    &:before {
      top: 20px;
    }
  }
  div:last-child {
    &:before {
      bottom: 21px;
    }
  }
}
.menu-title {
  line-height: 44px;
  background-color: #f3f3f3;
  padding-left: 22px;
}
.category {
  position: relative;
  line-height: 44px;
  cursor: pointer;
  &:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 32px;
    border-left: 1px dotted #000;
  }
  .iconfont {
    position: absolute;
    left: 12px;
    top: 0px;
    font-size: 22px;
    background-color: #fff;
  }
  h4 {
    position: relative;
    padding-left: 40px;
  }
  li {
    position: relative;
    padding-left: 36px;
    margin-left: 24px;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 22px;
      width: 32px;
      border-bottom: 1px dotted #000;
    }
  }
  li,
  h4 {
    @include webkit(transition, all 0.3s ease 0s);
    &:hover {
      background-color: #f3f3f3;
      .button-group {
        display: block;
      }
    }
  }
}
.button-group {
  position: absolute;
  right: 11px;
  top: 0;
  z-index: 2;
  display: none;
}

.w420 {
  width: 420px;
}

.mt {
  margin-top: 20px;
}

.hr-e9e9e9 {
  width: calc(100%+60px);
  margin-left: -30px;
  border: none;
  border-bottom: 3px solid #e9e9e9;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
